import { defineComponent, onMounted, ref, reactive } from "vue";
import styles from "./orderDetail.module.scss";
import { useRoute, useRouter } from "vue-router";
import SafeArea from "@/components/safe-area/safe-area.vue";
import Agreement from "../insure/components/Agreement/Agreement";
import { $orderSingleDetail } from "@/apis/api";
import to from "await-to-js";
// import { IconFont } from '@nutui/icons-vue';
// import '@nutui/icons-vue/dist/style_iconfont.css';
import { useStore as useIndexStore } from "@/store/index";
import usePay from "@/hooks/usePay";
import NeedLogin from "@/components/NeedLogin/NeedLogin";
import Clipboard from "clipboard";
import { Toast } from "@nutui/nutui";

export default defineComponent({
  setup() {
    const agreementRef = ref(null as any);
    const pay = usePay();
    const route = useRoute();
    const router = useRouter();
    const indexStore = useIndexStore();
    const order_no = route.query.order_no;
    onMounted(() => {
      getDetail();
    })
    const state = reactive({
      pay_status: {

      },
      start_date: '',
      insured: {},
      sum_premium: 0,
      order_no,
      create_time: '',
      pay_type: '微信支付',
      out_trade_no: '',
      ticket: '',
    } as any)
    const getDetail = async () => {
      const [err, res]: any = await to($orderSingleDetail({ order_no }));
      if (!err) {
        state.pay_status = res.data?.pay_status || {};
        state.start_date = res.data?.start_date || '';
        state.insured = res.data?.insured || {};
        state.sum_premium = res.data?.sum_premium || 0;
        state.create_time = res.data?.create_time || '';
        state.out_trade_no = res.data?.out_trade_no || '';
        state.ticket = res.data?.ticket || '';
      } else {
        setTimeout(() => {
          router.go(-1);
        }, 1500);
      }
    }
    const seeDetail = () => {
      agreementRef.value?.open("wap_guarantee");
    }
    return () => (
      <div class={styles.orderDetail}>
        <div class={styles.container}>
          <div class={styles.header}>
            <span class={styles.payStatus}>{state.pay_status.value}</span>
            {
              state.pay_status.label === 1 && (
                <span class={styles['start-date']}>订单已支付成功,保单将从‘{state.start_date}’起生效</span>
              )
            }
          </div>
          <div class={styles.info}>
            <div class={styles['insured-name']}>
              {/* <IconFont name="order" color="rgb(45, 139, 229)" /> */}
              <span>被保险人: {state.insured.name}</span>
            </div>
            <div class={styles['insured-idno']}>{state.insured.id_no}</div>
          </div>
          <div class={styles.content}>
            <div class={styles['content-header']}>
              <span>当前保障</span>
              <span onClick={() => seeDetail()}>查看保障内容</span>
            </div>
            <div class={styles['content-container']}>
              <span class={styles.name}>{indexStore.info.name}</span>
              <span class={styles.count}>数量 ×1</span>
              <span class={styles.price}>￥{state.sum_premium}元</span>
            </div>
          </div>
          <div class={styles.orderInfo}>
            <div class={styles['orderInfo-header']}>
              <span>订单信息</span>
            </div>
            <div class={styles['orderInfo-container']}>
              <div class={styles['orderInfo-row']}>
                <span class={styles['orderInfo-label']}>订单编号</span>
                <div class={styles['orderInfo-value']}>
                  {state.order_no}
                  <span
                    class={styles.copy}
                    id="copyBtn"
                    data-clipboard-text={state.order_no}
                    onClick={() => {
                      let clipboard = new Clipboard("#copyBtn");
                      //复制成功
                      clipboard.on("success", (res:any) => {
                        Toast.success("复制成功!");
                        clipboard.destroy();
                      });
                      //复制失败
                      clipboard.on("error", (err:any) => {
                        Toast.fail("复制失败!");
                        clipboard.destroy();
                      });
                    }}>复制</span>
                </div>
              </div>
              <div class={styles['orderInfo-row']}>
                <span class={styles['orderInfo-label']}>创建时间</span>
                <span class={styles['orderInfo-value']}>{state.create_time}</span>
              </div>
              <div class={styles['orderInfo-row']}>
                <span class={styles['orderInfo-label']}>支付方式</span>
                <span class={styles['orderInfo-value']}>{state.pay_type}</span>
              </div>
            </div>
          </div>
        </div>
        {
          state.pay_status.label === 0 && (
            <div class={styles.footer}>
              <nut-button type="primary" size="mini" onClick={() => { pay.submit(state.out_trade_no, state.order_no) }}>支付</nut-button>
            </div>
          )
        }
        <SafeArea />
        <Agreement ref={agreementRef} />
        <NeedLogin />
      </div>
    )
  }
})